<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

import { fujiimgPictureService } from '@/api/tools'
const downPicture = async () => {
  const link = document.createElement('a')
  link.href = pictureUrl.value
  link.download = 'fujiimg.png'
  link.click()
  link.remove() // 清理 DOM

  // window.open(musicUrl.data)
}

const pictureUrl = ref('')
const loadPicture = async () => {
  const picture = await fujiimgPictureService()
  const blob = new Blob([picture.data], { type: 'image/png' })
  pictureUrl.value = URL.createObjectURL(blob)
  // console.log(pictureUrl.value)
}

onMounted(async () => {
  await loadPicture()
})
</script>

<template>
  <div class="tool-box-fujiimg">
    <div class="tool-box-fujiimg-header">
      <van-nav-bar
        fixed
        :placeholder="true"
        title="腹肌图片"
        left-arrow
        @click-left="router.go(-1)"
      />
    </div>
    <div class="tool-box-fujiimg-content" style="margin-bottom: 100px">
      <van-image
        height="100%"
        width="100%"
        fit="scale-down"
        lazy-load
        :src="pictureUrl"
      >
      </van-image>
      <div class="tool-box-fujiimg-content-button">
        <van-button @click.stop="downPicture()" plain type="primary">
          下载图片
        </van-button>
        <van-button @click="loadPicture()" plain type="primary">
          换一个
        </van-button>
      </div>
    </div>
  </div>
</template>
<style scoped>
.tool-box-fujiimg-content-button {
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin: 10px auto;
}
</style>
